<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" user-scalable="no">
    <style type="text/css">
        /* module */
        .g-box {
            position: relative;
            width: 80%;
            margin: 20px auto;
            background: #CBE9CB;
        }

        .title {
            padding: 20px;
            font-size: 18px;
        }
        .group{
            font-size: 16px;
            padding: 0px 0 0 38px;
        }

        .list {
            padding: 0 40px 20px;
            list-style-type: none;
            font-size: 16px;
        }

        .list li {
            position: relative;
        }

        .list a {
            display: block;
            line-height: 50px;
            padding: 0 10px 0 50px;
            color: #000;
        }

        .list a:hover {
            color: #000;
            text-decoration: none;
            background: #A7CBA7;
        }

        .list .dot {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 10px;
            height: 10px;
            background-color: #7F9F95;
        }

        .g-box-half{
            width:48%;
            display: inline-block;
            vertical-align: top;
        }
        .disabled{
            pointer-events: none;
            cursor: default;
            opacity: 0.6;
        }

    </style>
</head>
<body>
<div class="g-box">
    <div class="g-box-half">
        <h1 class="title">接口: </h1>
        <% apis.forEach(function(group) {%>
        <h2 class="group"> <%= group.group %> </h2>
        <ul class="list">
            <% group.apis.forEach(function(api) { %>
            <li>
                <div class="dot"></div>
                <% if(api.isGet) { %>
                <a href="<%= api.url %>"><%= api.name %></a>
                <% }else { %>
                <a href="#" class="disabled"><%= api.name %></a>
                <% } %>
            </li>
            <% }); %>
        </ul>
        <% }); %>
    </div>
     <div class="g-box-half">
        <h1 class="title">页面: </h1>
        <ul class="list">
            <% routes.forEach(function(route) { %>
            <li>
                <div class="dot"></div>
                <a href="<%= route.url %>"><%= route.name %>&nbsp;&nbsp;---->&nbsp;&nbsp;<%= route.url %></a>
            </li>
            <% }); %>
        </ul>
    </div>
</div>
</body>
